import React from 'react';
import { Upload, Icon, message, Button } from 'antd';
import { connect } from 'dva';
import { UrlConfig } from "../../../services/fetch";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isPNG = file.type === 'image/png';
  if (!isJPG && !isPNG) {
    message.error('图片格式不正确');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('图片大小不能超过2M');
  }
  if (isJPG) {
    return isJPG && isLt2M;
  } else {
    return isPNG && isLt2M;
  }
}

@connect(({ add }) => ({
  add: add
}))
export default class Uploads extends React.Component {
  state = {
    loading: false,
    imageUrl: `${UrlConfig}/application/fcpublic/resource/images/default.png`
  };
  componentDidMount() {
    //订阅  从内容库选择
    window.PubSub.subscribe('bannerImg', this.setBannerImg)
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.img) {
      return { imageUrl: nextProps.img }
    }
    if (nextProps.add.articleData.length > 0) {
      if (nextProps.add.articleData[0].data) {
        let imageUrl = nextProps.add.articleData[0].data.video_img
        return { imageUrl }
      }
    }
    return null
  }

  //订阅
  setBannerImg = (data) => {
    if (data.type === 'biz_sobey_picture') {
      this.setState({
        imageUrl: data.keyFrameUrl
      })
      this.props.form.setFieldsValue({
        information_img: data.keyFrameUrl
      })
    }
  }
  /**
   * 从内容库选择
   */
  fromContent = () => {
    if (window.bar) {
      window.bar.show('picture', 'ggsc');//图片
      this.props.dispatch({ type: 'add/saveMchType', data: 'bannerImg' })
    }
  }


  /**
 * 上传插件
 */
  fcUpload = (key) => {
    window.fc = new window.FcUpload({
      elem: 'fcUpload',
      oss: this.props.add.configJson.aliyunOssSwitch,       //是否为oss 上传
      multiple: false,  //是否允许上传多个文件
      type: 'img', // 上传文件类型\ img 图片，  video 视频
      actionImg: `${UrlConfig}/fcpublic/uploads/uploadImg`,  //本地上传图片地址
      actionVideo: `${UrlConfig}/fcpublic/uploads/uploadVideo`,  //本地上传视频地址
      actionOss: this.props.add.configJson.actionOss,  //后端认证接口，获取临时上传凭证
      endpoint: this.props.add.configJson.endpoint,
      bucket: this.props.add.configJson.bucket,
      customDomain : this.props.add.configJson.customDomain,
      ossConfig: this.props.add.configJson,
      callback: (callRes) => {
        let url;
        if (callRes.oss) {  // oss 和本地返回数据结构不一样
          url = callRes.response[0];
        } else {
          url = callRes.response[0].data;
        }
          this.props.form.setFieldsValue({
              information_img: url
          })
        this.setState({
          imageUrl: url
        });
        setTimeout(function () {
            document.getElementById('uploads-img').setAttribute('src',url);
        },300)


      }
    })

    window.fc.show();
  }

  render() {

    const imageUrl = this.state.imageUrl;

    return (
      <div>
        <img onClick={this.fcUpload} src={imageUrl} width="279px" height="149px" id="uploads-img"/>
        {this.props.add.configJson.mchSwitch ? <Button onClick={this.fromContent} >从内容库选择</Button> : ''}
      </div>
    );
  }
}

